<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="Use the CesiumWidget to create a simple 3D globe.">
    <!--meta name="cesium-sandcastle-labels" content="Beginner, Showcases"-->
    <title>Cesium Demo</title>
    <link href="./Components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="./Components/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="./Components/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="./Components/bootstrap/css/simple-sidebar.css" rel="stylesheet">
    <!--script type="text/javascript" src="./Apps/Sandcastle/Sandcastle-header.js"></script-->
    <script src="./Components/js/satellite.min.js"></script>
    <script type="text/javascript" src="./ThirdParty/requirejs-2.1.20/require.js"></script>
    <script type="text/javascript">
    require.config({
        baseUrl : './Source',
        waitSeconds : 60
    });
    </script>
</head>
<body><!-- class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html"-->
<style>
    @import url(./Apps/Sandcastle/templates/bucket.css);
</style>

<div id="cesiumContainer" class="fullSize"></div>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">SatViewer</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> </a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Workspace</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Open</a></li>
                        <li><a href="#">Save as</a></li>
                        <li><a href="#">Reload</a></li>
                    </ul>
                </li>
                <li><a href="#menu-toggle" class="btn btn-default" id="menu-toggle"><i class="fa fa-list"></i> </a></li>
                <li><a href="#" class="btn btn-default" id="polygon"><i class="fa fa-connectdevelop"></i></a></li>
                <li><a href="#login">Log in</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
<!-- Sidebar -->
<div id="wrapper">
<div id="sidebar-wrapper">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-md-4" for="satellite">Satellite </label>
            <div class="col-md-8">
                <select type="date" class="form-control" id="satellite">
                    <option id = "blank-opt">Select satellite</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-4" for="startDate">Start Date </label>
            <div class="col-md-8">
                <input type="date" class="form-control" id="startDate" required>
            </div>
        </div>
        <!--div class="form-group">
            <label class="control-label col-md-4" for="startTime">Start Time </label>
            <div class="col-md-8">
                <input type="time" class="form-control" id="startTime" required>
            </div>
        </div-->
        <div class="form-group">
            <label class="control-label col-md-4" for="endDate">End Date </label>
            <div class="col-md-8">
                <input type="date" class="form-control" id="endDate" required>
            </div>
        </div>
        <!--div class="form-group">
            <label class="control-label col-md-4" for="endTime">End Time </label>
            <div class="col-md-8">
                <input type="time" class="form-control" id="endTime" required>
            </div>
        </div-->
        <div class="form-group">
            <label class="control-label col-md-4" for="maxRoll">Max Roll </label>
            <div class="col-md-8">
                <input type="number" class="form-control" min="0" max="45" value="30" id="maxRoll" required>
            </div>
        </div>
        <!--div class="form-group">
            <label class="control-label col-md-4" for="viewAngle">View Angle </label>
            <div class="col-md-8">
                <input type="number" class="form-control" min="0" max="10" step="0.01" value="2" id="viewAngle">
            </div>
        </div-->
        <div class="form-group">
            <label class="control-label col-md-4" for="SunAngle">Sun Angle </label>
            <div class="col-md-8">
                <input type="number" class="form-control" min="-90" max="90" step="1" value="10" id="SunAngle">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-4" for="pointLat">Latitude </label>
            <div class="col-md-8">
                <input type="text" class="form-control" value="" id="pointLat">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-4" for="pointLng">Longitude </label>
            <div class="col-md-8">
                <input type="text" class="form-control"  value="" id="pointLng">
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-6">
                <button type="submit" class="btn btn-default" id="orbitCalc">Draw orbit</button>
            </div>
            <div class="col-md-6">
                <button type="submit" class="btn btn-default" id="prepogate">Propagate</button>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-12">
                <button type="submit" class="btn btn-default" id="optimize">Optimize</button>
            </div>
        </div>
        <!--div class="progress">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0"
                 aria-valuemin="0" aria-valuemax="100" style="width:0%">
                0%
            </div>
        </div-->
    </form>
</div>
<!-- /#sidebar-wrapper -->
</div>

<!--Prepogated tracks-->
<div id="prep-tracks" class="list-group">
    <a href="#" class="list-group-item" id="track-0"><h3 class="list-group-item-heading">Prepogated tracks</h3></a>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./Components/bootstrap/js/bootstrap.min.js"></script>
<!-- script src="./Components/js/satellite.min.js"></script>
<div id="toolbar"></div -->
<script type="text/javascript" src="./Components/js/geomath.js"></script>
<script type="text/javascript" src="./Components/js/polygon.js"></script>
<script type="text/javascript" src="./Components/js/main.js"></script>


</body>
</html>
